<template>
	<div class="course_learn_wrapper">
		<div class="header hidden-sm-and-down">
			<h1>{{ data.title }}</h1>
			<el-tag size="small" v-for="(item, index) in courseTypeNames" :key="index">{{ item.name }}</el-tag>
			<el-button type="primary" size="small" plain @click="handleReturnDetail()">返回</el-button>
		</div>
		<div class="content">
			<course-player :data="courseFile" :list="courseChapters" :period="data.sumHours" />
			<el-tree v-bind="treeConfig" :data="courseChapters" @node-click="handleNodeClick">
				<template slot-scope="{ node, data }">
					<template v-if="node.level === 1">
						<h4 class="el-tree-node__label">第{{ returnChapterIndex(node) }}章：{{ data.name }}</h4>
					</template>
					<template v-else>
						<div class="el-tree-node__label" :title="data.name">第{{ returnChapterIndex(node) }}节：{{ data.name }}</div>
					</template>
				</template>
			</el-tree>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import coursePlayer from './player';
import videoPlayer from '@/components/player/video';
import { getCourseChapter, getChapterKnowledge } from '@/api/openApi';
export default {
	components: { coursePlayer },
	consts: ['VIDEO_DRAGBAR', 'IS_MANUAL_SWITCH'],
	props: {
		data: { type: Object, default: () => {} },
		chapters: { type: Array, default: () => [] }
	},
	data() {
		return {
			courseChapters: [],
			treeConfig: {
				ref: 'tree',
				nodeKey: 'id',
				showCheckbox: true,
				checkStrictly: true,
				defaultExpandAll: true,
				checkOnClickNode: true,
				class: 'course_learn_tree',
				props: {
					children: 'childList',
					disabled: (data, node) => {
						return data.type === '2';
					}
				}
			},
			novideo: require('@/assets/img/novideo.svg'),
			courseFile: {}
		};
	},
	computed: {
		...mapGetters(['courseLabel']),
		selectedChapter() {
			return this.$route.query.drama;
		},
		courseTypeNames() {
			let labelValue = this.data?.labelValue || '';
			return this.courseLabel?.filter((n) => labelValue.includes(n.id)) || [];
		}
	},
	watch: {
		data: {
			handler(data) {
				if (!lodash.isEmpty(data)) {
					this.getCourseChapterData();
				}
			},
			immediate: true
		},
		selectedChapter: {
			handler(val) {
				if (!val) return false;
				this.getChapterKnowledgeData(val);
				this.$nextTick(() => {
					this.$refs['tree'].setCheckedKeys([val]);
				});
			},
			immediate: true
		}
	},
	methods: {
		async getCourseChapterData() {
			let params = { pid: 0, courseId: this.data.id };
			let result = await getCourseChapter(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = result.data || [];
				const findNode = (arr, parentIndex = '') => {
					return arr.map((item, index) => {
						let obj = { ...item };
						obj.index = parseInt(`${parentIndex}${index + 1}`);
						obj.childList = item.childList || [];
						obj.childList = obj.childList.length > 0 ? findNode(obj.childList, obj.index) : [];
						return obj;
					});
				};
				this.courseChapters = findNode(datas);
			}
		},

		//返回章节索引
		returnChapterIndex(node) {
			let nodeArr = node.parent.childNodes;
			let index = nodeArr.findIndex((n) => n.data.id === node.data.id);
			return index + 1;
		},

		//点击章节
		handleNodeClick(data, node) {
			if (data.type === '2' && node.level === 2 && node.isLeaf) {
				let path = this.$route.path;
				let manualSwitch = this.dictData['IS_MANUAL_SWITCH'];
				if (manualSwitch === '1') return false;
				this.$refs['tree'].setCheckedKeys([data.id]);
				this.$router.replace({ path, query: { type: 'learn', drama: data.id } });
			} else {
				this.$refs['tree'].setChecked(data.id, false);
			}
		},

		//获取章节知识点
		async getChapterKnowledgeData(chapterId) {
			let params = { page: 1, limit: 1, courseId: this.data.id, chapterId };
			let result = await getChapterKnowledge(params).then((res) => res.data);
			if (result.code === '0') {
				this.courseFile = this.$detailData(result.data);
			}
		},

		//点击返回
		handleReturnDetail() {
			this.$router.back();
		}
	}
};
</script>

<style lang="scss" scoped>
.course_learn_wrapper {
	.header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 20px;
		h1 {
			font-size: 24px;
			line-height: 1.5;
		}
		.el-tag {
			margin-left: 10px;
			overflow: hidden;
		}
		.el-button {
			margin-left: auto;
		}
	}
	.content {
		display: flex;
		flex-wrap: wrap;
	}
}
.course_learn_tree::v-deep {
	width: 100%;
	flex-shrink: 0;
	box-sizing: border-box;
	border: solid 1px #ebeef5;
	overflow: hidden;
	overflow-y: auto;
	.el-tree-node__content {
		height: 36px;
		padding-right: 0;
		flex-direction: row-reverse;
		&:has(.is-checked) {
			background-color: var(--primary-background-hover);
		}
	}
	.el-tree-node__label {
		flex: 1;
		margin-left: 10px;
	}
	.el-checkbox {
		display: none;
	}
}
@media (min-width: 992px) {
	.course_learn_wrapper {
		padding: 20px;
	}
	.course_learn_tree::v-deep {
		width: 300px;
		margin-left: 15px;
		border-left-color: var(--primary);
		border-left-width: 4px;
	}
}
</style>
